<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="城市" prop="city">
                            <el-select v-model="condition.search.city" filterable placeholder="请选择">
                                <el-option
                                    v-for="item in cities"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="区域" prop="district">
                            <el-input v-model="condition.search.district"
                                      placeholder="区域"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="商圈" prop="region">
                            <el-input v-model="condition.search.region"
                                      placeholder="商圈"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="美食分类" prop="foodCategory">
                            <el-select v-model="condition.search.foodCategory" filterable placeholder="请选择">
                                <el-option
                                    v-for="item in foodCategories"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item label="榜单类型" prop="rankType">
                            <el-select v-model="condition.search.rankType" filterable placeholder="请选择">
                                <el-option
                                    v-for="item in rankTypes"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="榜单KEY值" prop="rankKey">
                            <el-input v-model="condition.search.rankKey"
                                      placeholder="榜单KEY值"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="是否收藏" prop="favoriteFlag">
                            <el-select v-model="condition.search.favoriteFlag" placeholder="是否收藏">
                                <el-option label="是" :value="true"></el-option>
                                <el-option label="否" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span=6>
                        <el-form-item label="同步状态" prop="syncStatus">
                            <el-select v-model="condition.search.syncStatus"
                                       placeholder="同步状态">
                                <el-option label="是" :value="true"></el-option>
                                <el-option label="否" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" v-on:click="showAddDialog">新增</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table
            id="mainTable"
            :data="tableData"
            size="small"
            header-cell-class-name="tableHeaderStyle"
            :row-class-name="tableRowClassName">
            <el-table-column label="序号" width="60">
                <template v-slot="scope">
                    <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="city"
                align="left"
                width="270px"
                label="榜单">
                <template v-slot="scope">
                    <el-link @click="clickRank(scope.row)">
                        {{ scope.row.rankName }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="rankKey"
                align="left"
                width="180px"
                label="榜单KEY值">
                <template v-slot="scope">
                    <el-link @click="clickKey(scope.row)">
                        {{ scope.row.rankKey }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                prop="order"
                align="center"
                label="排序">
            </el-table-column>
            <el-table-column
                prop="syncDate"
                align="center"
                label="上次同步日期">
            </el-table-column>
            <el-table-column
                prop="favoriteFlag"
                align="center"
                :formatter="formatBoolean"
                label="是否收藏">
            </el-table-column>
            <el-table-column
                prop="syncStatus"
                align="center"
                :formatter="formatBoolean"
                label="是否每日同步">
            </el-table-column>
            <el-table-column
                prop="updateTime"
                align="center"
                width="150px"
                label="更新时间">
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right"
                align="center"
                width="150px">
                <template v-slot="scope">
                    <div>
                        <el-button @click="onDetail(scope.row)" type="text" size="small">详情</el-button>
                        <el-button @click="onSync(scope.row)" type="text" size="small">同步</el-button>
                        <el-button @click="showUpdateDialog(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="onDelete(scope.row)" type="text" size="small">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            small
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="condition.page"
            :page-sizes="[50, 100, 150, 200, 400]"
            :page-size.sync="condition.rows"
            layout="sizes, prev, pager, next"
            :total.sync="condition.total">
        </el-pagination>
        <el-dialog :title=addOrUpdateDialogTitle width="30%" :visible.sync="addOrUpdateDialogVisible">
            <el-form :model="addOrUpdateForm" label-width="120px" size="small">
                <el-form-item label="城市">
                    <el-select v-model="addOrUpdateForm.city" filterable placeholder="请选择">
                        <el-option
                            v-for="item in cities"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域">
                    <el-input v-model="addOrUpdateForm.district"
                              placeholder="区域"></el-input>
                    <div class="form-tips">可填全城</div>
                </el-form-item>
                <el-form-item label="商圈">
                    <el-input v-model="addOrUpdateForm.region"
                              placeholder="商圈"></el-input>
                    <div class="form-tips">可填全部商圈</div>
                </el-form-item>
                <el-form-item label="美食分类">
                    <el-select v-model="addOrUpdateForm.foodCategory" filterable placeholder="请选择">
                        <el-option
                            v-for="item in foodCategories"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="榜单类型">
                    <el-select v-model="addOrUpdateForm.rankType" filterable placeholder="请选择">
                        <el-option
                            v-for="item in rankTypes"
                            :key="item"
                            :label="item"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="榜单KEY值">
                    <el-input v-model="addOrUpdateForm.rankKey"
                              placeholder="榜单KEY值"></el-input>
                </el-form-item>
                <el-form-item label="是否每日同步">
                    <el-switch v-model="addOrUpdateForm.syncStatus"></el-switch>
                </el-form-item>
                <el-form-item label="是否收藏">
                    <el-switch v-model="addOrUpdateForm.favoriteFlag"></el-switch>
                </el-form-item>
                <el-form-item label="顺序">
                    <el-input v-model="addOrUpdateForm.order" placeholder="顺序"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                    <div class="form-tips">
                        值越大显示越靠前！
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addOrUpdateDialogVisible = false" size="small">取 消</el-button>
                <el-button @click="addOrUpdateConfirm" type="primary" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {addDpRank, deleteDpRank, getDpRankByPage, getParamValue, syncDpRank, updateDpRank} from '@/api/api'

export default {
    name: "DpRank",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 50,
                total: 0,
                search: {}
            },
            // 表格数据
            tableData: [],
            // 新增或者编辑对话框显示
            addOrUpdateDialogVisible: false,
            // 标题
            addOrUpdateDialogTitle: '新增',
            // 新增或者编辑对话框表单
            addOrUpdateForm: {},
            // 选中行
            selectedRow: {},

            // 城市列表
            cities: ['上海', '北京', '广州', '深圳', '天津', '杭州', '南京', '苏州', '成都', '武汉', '重庆', '西安'],
            // 美食分类
            foodCategories:
                ['全部美食', '火锅', '日本菜', '西餐', '本帮江浙菜', '川菜', '烤肉', '咖啡厅', '自助餐', '烧烤烤串',
                    '粤菜', '韩国料理', '鱼鲜', '湘菜', '东北菜', '私房菜', '东南亚菜', '农家菜', '特色菜', '北京菜',
                    '新疆菜', '创意菜', '家常菜', '小龙虾', '素食', '中东菜', '小吃快餐', '面包甜点', '面馆', '饮品店'],
            // 榜单类型
            rankTypes: ['热门榜', '好评榜', '口味榜', '环境榜', '服务榜'],
        }
    },
    methods: {
        clickRank(row) {
            // let url = "https://m.dianping.com/rankinglist/index?notitlebar=1&rankKey=" + row.rankKey;
            // window.open('javascript:window.name;', '<script>location.replace("' + url + '")<\/script>');
            this.onDetail(row);
        },
        clickKey(row) {
            // let url = "http://www.dianping.com/shoplist/shopRank/pcChannelRankingV2?rankId=" + row.rankKey;
            // window.open('javascript:window.name;', '<script>location.replace("' + url + '")<\/script>');
            this.onDetail(row);
        },
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatSyncStatus: function (row, column, cellValue) {
            if (cellValue == '0') {
                return "关闭";
            } else if (cellValue == '1') {
                return "开始";
            } else {
                return "未知";
            }
        },
        showAddDialog: function () {
            this.addOrUpdateDialogTitle = '新增';
            this.addOrUpdateDialogVisible = true;
            this.addOrUpdateForm = {};
            this.$set(this.addOrUpdateForm, "syncStatus", true);
            this.$set(this.addOrUpdateForm, "favoriteFlag", false)
            this.$set(this.addOrUpdateForm, "order", 100000)
        },
        showUpdateDialog: function (row) {
            this.addOrUpdateDialogTitle = '编辑';
            this.addOrUpdateDialogVisible = true;
            this.selectedRow = row;
            // 深拷贝
            this.addOrUpdateForm = Object.assign({}, row);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#mainTable', '数据.xlsx');
        },
        add: function () {
            addDpRank(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        update: function () {
            updateDpRank(this.addOrUpdateForm).then(data => {
                if (data.respCode == 1000) {
                    this.addOrUpdateDialogVisible = false;
                    this.getData();
                }
            });
        },
        onDetail: function (row) {
            this.$router.push({path: '/dp/rank/detail', query: {id: row.id}});
        },
        onSync: function (row) {
            syncDpRank({id: row.id}).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '同步成功!'
                    });
                    this.getData();
                }
            })
        },
        onDelete: function (row) {
            this.$confirm('请确认是否删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDpRank({id: row.id}).then(data => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        addOrUpdateConfirm: function () {
            if (this.addOrUpdateDialogTitle == '新增') {
                this.add();
            } else if (this.addOrUpdateDialogTitle == '编辑') {
                this.update();
            }
        },
        // 获取表格数据
        getData: function () {
            getDpRankByPage(this.condition).then(data => {
                this.tableData = data.body.rows;
                this.condition.total = data.body.total;
            });
        },
        // 获取门店分类
        getCities() {
            if (this.cities.length > 0) {
                return;
            }
            this.cities = [];
            getParamValue('dp_cities').then(data => {
                let ss = data.body;
                this.cities = JSON.parse(ss);
                console.log(this.cities);
            })
        }
    },
    created() {
        this.getData();
    },
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
